<template>
	<view>
		<view class="path-link" :style="{'top':top+'px'}">
			<span class="paths">
				/home/Global
			</span>
		</view>
		<input-search class="input-search" placeholder="Library Name" :style="{'top':(top+35)+'px'}" @click="getValue"></input-search>
		<view class="file-list">
			<file-types v-for="(item,index) in fillist " :key="index" :type="item.type" :name="item.name" :time="item.time"
			 :size="item.size" @click="getItem(item)"></file-types>
		</view>
	</view>
</template>

<script>
	import fileTypes from '@/components/file-types/file-types.vue'
	import inputSearch from '@/components/input-search/input-search.vue'
	export default {
		components: {
			fileTypes,
			inputSearch
		},
		data() {
			return {
				top: null,
				urlParse: 'https://view.officeapps.live.com/op/view.aspx?src=',
				fillist: [{
					type: "folder",
					name: "点我进入打开的是腾讯的在线文档",
					size: 5.80,
					time: "2020-04-11"
				}, {
					type: "folder",
					name: "Noth America",
					size: 6.10,
					time: "2020-04-12"
				}, {
					type: "folder",
					name: "Australia/ New Zealand",
					size: 2.80,
					time: "2020-04-14"
				}, {
					type: "folder",
					name: "我下面的文件是在线预览的文件",
					size: 2.80,
					time: "2020-04-14"
				}, {
					type: "pdf",
					name: "20200411_TraQline_OPE_US_Market_Full Year Update_v20",
					size: 2.80,
					time: "2020-04-16",
					url: "http://cdn.pandaps.cn/test.pdf"
				}, {
					type: "xls",
					name: "Bosch_Today_2020_EN",
					size: 2.80,
					time: "2020-04-15",
					url: "http://cdn.pandaps.cn/test.xls"
				}, {
					type: "ppt",
					name: "20210411_TraQline_OPE_US_Market_Full Year Update_v20",
					size: 2.80,
					time: "2020-04-17",
					url: "http://cdn.pandaps.cn/test.ppt"
				}, {
					type: "doc",
					name: "Bosch_Today_2021_ZH",
					size: 2.80,
					time: "2020-04-18",
					url: "http://cdn.pandaps.cn/test.doc"
				}, {
					type: "pdf",
					name: "20200411_TraQline_OPE_US_Market_Full Year Update_v20",
					size: 2.80,
					time: "2020-04-16",
					url: "http://cdn.pandaps.cn/test.pdf"
				}, {
					type: "xls",
					name: "Bosch_Today_2020_EN",
					size: 2.80,
					time: "2020-04-15",
					url: "http://cdn.pandaps.cn/test.xls"
				}, {
					type: "ppt",
					name: "20210411_TraQline_OPE_US_Market_Full Year Update_v20",
					size: 2.80,
					time: "2020-04-17",
					url: "http://cdn.pandaps.cn/test.ppt"
				}, {
					type: "doc",
					name: "Bosch_Today_2021_ZH",
					size: 2.80,
					time: "2020-04-18",
					url: "http://cdn.pandaps.cn/test.doc"
				}, {
					type: "pdf",
					name: "20200411_TraQline_OPE_US_Market_Full Year Update_v20",
					size: 2.80,
					time: "2020-04-16",
					url: "http://cdn.pandaps.cn/test.pdf"
				}, {
					type: "xls",
					name: "Bosch_Today_2020_EN",
					size: 2.80,
					time: "2020-04-15",
					url: "http://cdn.pandaps.cn/test.xls"
				}, {
					type: "ppt",
					name: "20210411_TraQline_OPE_US_Market_Full Year Update_v20",
					size: 2.80,
					time: "2020-04-17",
					url: "http://cdn.pandaps.cn/test.ppt"
				}, {
					type: "doc",
					name: "Bosch_Today_2021_ZH",
					size: 2.80,
					time: "2020-04-18",
					url: "http://cdn.pandaps.cn/test.doc"
				}, {
					type: "pdf",
					name: "20200411_TraQline_OPE_US_Market_Full Year Update_v20",
					size: 2.80,
					time: "2020-04-16",
					url: "http://cdn.pandaps.cn/test.pdf"
				}, {
					type: "xls",
					name: "Bosch_Today_2020_EN",
					size: 2.80,
					time: "2020-04-15",
					url: "http://cdn.pandaps.cn/test.xls"
				}, {
					type: "ppt",
					name: "20210411_TraQline_OPE_US_Market_Full Year Update_v20",
					size: 2.80,
					time: "2020-04-17",
					url: "http://cdn.pandaps.cn/test.ppt"
				}, {
					type: "doc",
					name: "Bosch_Today_2021_ZH",
					size: 2.80,
					time: "2020-04-18",
					url: "http://cdn.pandaps.cn/test.doc"
				}]
			};
		},
		onNavigationBarButtonTap(e) {
			if (e.text === "Back") {
				uni.navigateTo({
					url: '../index/index'
				});
			}
		},
		onLoad() {
			const res = uni.getSystemInfoSync();
			this.top = res.windowTop;
		},
		methods: {
			getValue(value) {
				if (value) {
					uni.showToast({
						icon: "none",
						title: value,
						duration: 2000
					});
				}
			},
			getItem(item) {
				switch (item.type) {
					case 'folder':
						uni.navigateTo({
							url: '../fileList/fileList'
						});
						break;
					case 'pdf':
						uni.navigateTo({
							url: `../web-view/wev-view?type=${item.type}&url=${encodeURIComponent(item.url)}`
						});
						break;
					case 'xls':
						location.href = this.urlParse + item.url;
						// uni.navigateTo({
						// 	url: `../web-view/wev-view?type=${item.type}&url=${encodeURIComponent(item.url)}`
						// });
						break;
					case 'ppt':
						location.href = this.urlParse + item.url;
						// uni.navigateTo({
						// 	url: `../web-view/wev-view?type=${item.type}&url=${encodeURIComponent(item.url)}`
						// });
						break;
					case 'doc':
						location.href = this.urlParse + item.url;
						// uni.navigateTo({
						// 	url: `../web-view/wev-view?type=${item.type}&url=${encodeURIComponent(item.url)}`
						// });
						break;
				}
			}
		}
	}
</script>

<style lang="less">
	.path-link {
		padding: 5px 0 0 2px;
		height: 30px;
		background-color: #FFFFFF;
		position: sticky;
		top: 0px;
		z-index: 9999;

		.paths {
			padding: 3px 50px 3px 2px;
			border-radius: 5px;
			background: #f4f4f6;
			border: 1px solid #CCCCCC;
		}
	}

	.input-search {
		position: sticky;
		top: 0px;
		z-index: 9999;
	}

	.file-list {
		padding: 5px;
	}
</style>
